<template>
  <div>
    <div :id=id style="height: 260px;width: 500px;"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted } from 'vue';

const props = defineProps({
  data: Object
})
const dataX = props.data.dataX;
const dataY = props.data.dataY;
const tag = props.data.tag;
const id = props.data.id;

const theColorList = ['#159aff', '#15fee4'];

onMounted(() => {
  getTheBar()
})
const getTheBar = () => {
  let chartDom = document.getElementById(id);
  let myChart = echarts.init(chartDom);
  let option;

  option = {
    color: ['#159aff', '#15fee4'],
    tooltip: [
      {
        show: true,
        trigger: 'axis',
        position: ['30%', 20],
        alwaysShowContent: true,
        className: 'theBarTheTooltip',

        formatter: (params, ticket, callback) => {
          let content = `<div style="display: flex; gap: 8px;">
                        <div class="theBarCircle">
                          <div class="theBarTheCircle" style="background-color:${theColorList[0]}"></div>
                        </div>
                        <div style='font-family: "PingFang-Medium"'>${tag.name}</div>
                      </div>
                      <div style="display: flex;gap: 10px;font-family: 'PingFang-Bold'">
                        <div>${tag.value}</div>
                        <div>${tag.percent}%</div>
                      </div>`
          return content
        }
      }
    ],
    xAxis: {
      type: 'category',
      data: dataX,
      axisTick: { show: false },
      axisLine: { show: false },
      axisLabel: {
        fontSize: 14,
        color: '#ffffff'
      },
    },
    yAxis: {
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#ffffff40'
        }
      }
    },
    series: [
      {
        name: 'hill',
        type: 'pictorialBar',
        // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
        symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
        itemStyle: {
        },
        emphasis: {
          itemStyle: {
            opacity: 1
          }
        },
        // z: 10,
        data: [
          {
            value: dataY[0],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#159aff20' },
                { offset: 1, color: '#159aff' },
              ]),
              borderColor: '#159aff',
              borderWidth: 5
            }
          },
          {
            value: dataY[1],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#15fee420' },
                { offset: 1, color: '#15fee4' },
              ]),
              borderColor: '#15fee4',
              borderWidth: 5
            }
          },
        ],
      }
    ]
  };
  option && myChart.setOption(option)
}
</script>
<style>
.theBarTheTooltip {
  width: 201px;
  height: 40px;
  background-image: url('/src/assets/images/theTooltip.png');
  background-color: rgba(0, 0, 0, 0.5) !important;
  color: #DBFAFF !important;
  border: none !important;

  display: flex !important;
  justify-content: space-between;
  align-items: center;
}

.theBarCircle {
  height: 18px;
  width: 18px;
  border: 1px solid rgba(145, 143, 143, 0.5);
  border-radius: 50%;

  display: flex;
  justify-content: center;
  align-items: center;

}

.theBarTheCircle {
  height: 7px;
  width: 7px;
  border-radius: 50%;
}
</style>